<template>
  <div>
    <div class="search-big dl-row-sb"   v-loading="loading">
        <el-input
            placeholder="请输入课程关键词"
            prefix-icon="el-icon-search"
			clearable
            v-model="searchName">
        </el-input>
      <el-button  type="success" round @click="init" style="margin-left: 20px">
		 <!-- <i class="el-icon-search"></i>&nbsp; -->
		  搜索</el-button>
    </div>
    <div class="center-box-detail main-box mar-top mar-bottom" v-if="data.length>0">
		<div class="minHeight">
			<div class="dl-row center tab-box" style="margin-left: -15px;margin-bottom: 20px">
			    <div  class="" >
			      <span class="cursor-pointer pb-1 act-item" >相关课程</span>
						<span style="color: #0068b6;">（{{total}}）</span>
			    </div>
			</div>
			<div>
			  <div class="border-main card-item-search dl-row"  v-for="(item,index) in data" :key="index" @click="toDetail(item.id)">
			    <img  :src="item.themeImage" srcset="" class=""  />
			    <div class="dl-column" style="width: 860px">
			      <h1 class="font-bold" >{{item.courseName}}</h1>
			      <p>{{item.courseDesc}}</p>
			      <ul class="sea-btn-blue">
			        <li>课程分类：{{item.source}}</li>
			        <!-- <li >课程时长：{{item.classHour | formateDate}}</li> -->
			      </ul>
			    </div>
			  </div>
			</div>
		</div>
	  <el-pagination
	  		        :total="total"
	  		        :current-page="page + 1"
	  		        style="margin-top: 8px;"
	  		        layout="total, prev, pager, next, sizes"
	  		        @size-change="sizeChange"
	  		        @current-change="pageChange"/>
    </div>
	<div class="center-box-detail main-box mar-top mar-bottom " v-if="data.length==0 && !loading">
		<el-empty   class="minHeight"  :image-size="260" :image="require('../../assets/no_data_images/no_course.png')"></el-empty>
	</div>
  </div>
</template>

<script>
	import initData from '@/mixins/initData'
	import { formatSeconds } from '@/utils/index'
	export default {
		name: "search",
		mixins: [initData],
		data() {
			return {
			  	searchName:this.$route.query.courseName,
				loading:false
			}
		},
		filters: {
		  formateDate (time) {
		    return formatSeconds(time)
		  }
		},
		created() {
			this.$nextTick(() => {
				this.init()
			})
		},
		methods: {
			beforeInit() {
				this.url = 'course/page-course-list-search'
				this.params = {
				  page: this.page,
				  size: this.size,
				  courseName: this.searchName
				}
				return true
			},
			getImage(obj){
				var imageUrl="";
				if(obj.themeImage){
					var array=eval('(' + obj.themeImage + ')');
					if(Object.prototype.toString.call(array)==='[object Array]'){
						imageUrl=array[0].url;
					}
				}
				return imageUrl;
			},
			toDetail(id) {
			  this.$router.push({path:'/course/detail',
			  query:{
			  	"courseId":id
			  }
			  })
			}
		}
	}
</script>

<style scoped lang="scss">
	.minHeight{
			min-height: calc(100vh - 442px);
		}
	.card-item-search{
	  margin-bottom: 20px;
	  cursor: pointer;
	  img{
		width: 158px;
		height: 110px;
		border-radius: 15px 15px 15px 15px;
		margin-right: 20px;
	  }
	  h1{
		font-size: 18px;
		font-weight: bold;
		color: #000000;
		margin-bottom: 5px;
	  }
	  p{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #666;
		font-size: 12px;
		line-height: 20px;
		margin-bottom: 8px;
	  }
	  span{
		line-height: 24px;
		color: #0068B6;
		font-size: 12px;
		padding-right: 24px;
	  }
	}
	.card-item-search:hover{
	  h1{
		color: #0068B6;
	  }
	}

</style>